<template>
  <el-form-item
    v-if="activeData.__config__.tag === 'UnDMatrixTable'"
    label="级联选项"
  >
    <draggable
      :list="activeData.rowList"
      :animation="340"
      group="selectItem"
      handle=".option-drag"
    >
      <div
        v-for="(item, index) in activeData.rowList"
        :key="index"
        class="select-item"
      >
        <div class="select-line-icon option-drag">
          <i class="el-icon-s-operation" />
        </div>
        <el-input
          v-model="item[0]"
          placeholder="选项名"
          size="small"
        />
        <div
          class="close-btn select-line-icon"
          @click="activeData.rowList.splice(index, 1)"
        >
          <i class="el-icon-remove-outline" />
        </div>
      </div>
    </draggable>
    <div style="margin-left: 20px">
      <el-button
        style="padding-bottom: 0"
        icon="el-icon-circle-plus-outline"
        type="text"
        @click="addRowListItem"
      >
        添加选项
      </el-button>
    </div>
    
  </el-form-item>
</template>

<script>
export default {
  name: 'UnDMatrixTableSetter',
  props: {
    activeData: Object
  },
  methods: {
    addRowListItem() {
      this.activeData.rowList.push(
        [`选项${this.activeData.rowList.lenght + 1}`, null]
      )
    }
  }
}
</script>

<style scoped lang="scss">

</style>